<template>
  <div>
    <div style='padding-bottom:15px'>
      <span class='goback' @click='goback'><i class='iconfont icon-return'></i> 返回大纲</span>
    </div>
    <div class="scroll-wrap">
      <el-collapse v-model='activeId' accordion>
        <el-collapse-item :name='item.id' class='chapter' v-for='(item, index) in outlineRef' :key='index'>
          <template #title>
            <h2 class='chapter-title' :title="item.name">第{{ index + 1 }}章{{ giveEllipsisStr1(item.name, 11) }}</h2>
          </template>
          <ul class='section'>
            <li class='section-title' :title='i.name' :class="nodeidRef==i.id?'active':''" v-for='(i, iidx) in item.sections'
                :key='iidx' @click='goDetail(i.id,i.name)'>
              {{ iidx + 1 }}. {{ giveEllipsisStr1(i.name, 11) }}
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>

</template>

<script setup>
import { giveEllipsisStr1 } from '@/utils/common';

import {teachDesignDetail,teachDesignPreview} from "@/api/chapter"

const props = defineProps({
  outline: {
    type: Array,
    default: () => [],
  },
  nodeid: {
    type: String,
    default: '',
  },
});

const router = useRouter();
const emits = defineEmits(['nodeIdEnv','sectNameEnv']);
const outlineRef = ref([]);
const nodeidRef = ref('');
const activeId = ref(0);
const DesignDetailArr=ref([])

outlineRef.value = [...props.outline];

nodeidRef.value = `${props.nodeid}`;

watch(() => props.outline, (nv) => {
  outlineRef.value = [...nv];
  collapseState();
});

watch(() => props.nodeid, (nv) => {
  nodeidRef.value = `${nv}`;
  collapseState();

});


//跳转到详情内容
const goDetail = (id,name) => {

  // id是小节的id
  // name是小节名称
  nodeidRef.value = id;
  emits('nodeIdEnv', nodeidRef.value);
  emits('sectNameEnv',name);
  // sessionStorage.setItem('nodeid', id);
  getSectionCon()
};
//根据小节id判断是否展开菜单
const collapseState = () => {
  outlineRef.value.forEach(item => {
    let some = item.sections.some(i => {
      return i.id == nodeidRef.value;
    });
    if (some) {
      activeId.value = item.id;
      return;
    }
  });
};

collapseState()
//返回上一页
const goback = () => {
  router.push({path:"/designclass/syllabus"});
};


// 获取小节内容
const getSectionCon=()=>{
  teachDesignDetail(nodeidRef.value).then(res=>{
    DesignDetailArr.value=res
    console.log(res);
  })
}

getSectionCon()

</script>

<style lang='scss' scoped>
@use '@/assets/styles/custom' as *;

.chapter {
  .chapter-title {
    font-size: 14px;
    color: #333333;
    @include text-line-hidden();
  }

  .section {
    padding-left: 10px;

    .section-title {
      font-size: 14px;
      color: #666666;
      line-height: 35px;
    }

    .section-title.active, .section-title:hover {
      color: #4395FF !important;
      cursor: pointer;
    }
  }

}

.scroll-wrap {
  height: calc(100vh - 112px);
  overflow-y: auto;
}

</style>
